<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>跟随</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    #main {
        position: absolute;
        background-color: #2CEE57;
       
    }
    
    #body {
        height: 5000px;
    }
    
    #div5,
    #div1 {
        position: absolute;
        background-color: #1D91D7;
        position: relative;
        left: -150px;
        width: 189px;
    }
    
    #div2,
    #div6 {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #1FBE99;
    }
    
    #div3,
    #div7 {
        width: 39px;
        height: 50px;
        float: left;
        background-color: #0BBCDC;
    }
    
    .div3 {
        width: 39px;
        height: 35px;
        float: left;
        background-color: #D823D6;
        padding-top: 15px;
    }
    </style>
    <script>
    window.onload = function(argument) {

        var odiv = document.getElementById('div1');
        odiv.style.left = -150 + 'px';
        var otxt = document.getElementById('txt');

        var omain = document.getElementById('main');
        
        setInterval(function(argument) {
           omainscrollTop =document.documentElement.scrollTop||document.body.scrollTop;
            trg3 = (document.documentElement.clientHeight - omain.offsetHeight) / 2 + omainscrollTop ;
            speed=(trg3-omain.offsetTop)/20;
         omain.style.top = omain.offsetTop+speed+'px'; // body...
          
           
        document.title =speed; }, 30);

        
    }
    var timer = null;
    var timer2 = null;

    function starmove(trg1) {
        var otxt = document.getElementById('txt');
        var odiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function(argument) {

            var speed = null;
            if (parseInt(odiv.style.left) < trg1) {
                speed = 11
            } else {
                speed = -11
            };
            otxt.value = parseInt(odiv.style.left) + ',' + speed;
            if (Math.abs(parseInt(odiv.style.left) - trg1) <= 12) {

                clearInterval(timer);
                odiv.style.left = trg1 + 'px';
                otxt.value = parseInt(odiv.style.left) + ',' + speed;
            } else {
                odiv.style.left = parseInt(odiv.style.left) + speed + 'px';
            }
        }, 60);
    };

    function starmove2(trg2) {
        var otxt = document.getElementById('txt');
        var odiv5 = document.getElementById('div5');
        clearInterval(timer2);

        //alert(odiv5.offsetLeft);
        timer2 = setInterval(function(argument) {

            ((odiv5.offsetLeft - trg2) /8) > 0 ? speed = Math.ceil((odiv5.offsetLeft - trg2) / 8) : speed = Math.floor((odiv5.offsetLeft - trg2) /8);
            otxt.value = odiv5.offsetLeft + ',' + speed;
            if (Math.abs(odiv5.offsetLeft - trg2) <= 0) {
                clearInterval(timer2);

            } else {
                odiv5.style.left = odiv5.offsetLeft - speed + 'px';
            }
        }, 60);
        // body...
    }
    </script>
</head>

<body>
    <div id="body">
        <div id="main">
            <input type="text" id="txt">
            <div id="div1" onmouseover="starmove(0)" onmouseout="starmove(-150)">
                <div id="div2"></div>
                <div id="div3"></div>
                <div class="div3">匀速</div>
            </div>
            <div id="div5" onmouseover="starmove2(0)" onmouseout="starmove2(-150)">
                <div id="div6"></div>
                <div id="div7"></div>
                <div class="div3">变速</div>
            </div>
        </div>
    </div>
</body>

</html>
